<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="手机号/昵称">
            <a-input v-model="queryParam.phone" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="注册时间" has-feedback>
            <a-range-picker style="width:100%;" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.regTime" @change="onChange" @ok="onOk" />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="订阅时间" has-feedback>
            <a-range-picker style="width:100%;" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.subStartTime" @change="onChange" @ok="onOk" />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="订阅到期时间" has-feedback>
            <a-range-picker style="width:100%;" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.subEndTime" @change="onChange" @ok="onOk" />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="剩余BOX">
            <a-input-number :min="0" :step="1" @change="lPriceChange" placeholder="最低数" v-model="queryParam.remainMin" />
            ———
            <a-input-number :min="0" :step="1" @change="gPriceChange" placeholder="最高数" v-model="queryParam.remainMax" />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="订阅状态">
            <a-select v-model="queryParam.subStatus" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in filter.subStatus" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="性别">
            <a-select v-model="queryParam.gender" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in filter.gender" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="搭配师">
            <a-select v-model="queryParam.fashionerId" placeholder="请选择" show-search :filter-option="filterOption" :show-arrow="false">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in filter.fashioner" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="搭配师类型">
            <a-select v-model="queryParam.fashionerType" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in filter.fashionerType" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-item label="会员卡等级">
            <a-select v-model="queryParam.vipType" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in filter.vipType" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!--        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">-->
        <!--          <a-form-item label="会员标签">-->
        <!--            <a-select mode="multiple" option-label-prop="label" v-model="queryParam.tags" placeholder="请选择">-->
        <!--              <a-select-option value="白金卡" label="白金卡">白金卡</a-select-option>-->
        <!--              <a-select-option value="金卡" label="金卡">金卡</a-select-option>-->
        <!--              <a-select-option value="银卡" label="银卡">银卡</a-select-option>-->
        <!--            </a-select>-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <template v-if="black">
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="黑名单原因">
              <a-select v-model="queryParam.reasonId" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.code" v-for="item in filter.blackListReason" :key="item.code">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="加入黑名单时间" has-feedback>
              <a-range-picker style="width:100%;" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.joinTime" @change="onChange" @ok="onOk" />
            </a-form-item>
          </a-col>
        </template>
        <template v-if="special">
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="特殊原因">
              <a-select v-model="queryParam.reasonId" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.code" v-for="item in filter.specialListReason" :key="item.code">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="加入特殊名单时间" has-feedback>
              <a-range-picker style="width:100%;" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.joinTime" @change="onChange" @ok="onOk" />
            </a-form-item>
          </a-col>
        </template>
        <a-col :xxl="black || special ? 24 : 12" :xl="black || special ? 24 : 16" :lg="black || special ? 24 : 24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <!-- <a-button style="margin-left: 8px">导出</a-button> -->
            <a-dropdown v-if="selectedRowKeys.length > 0">
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="showModal('swap', true)"><a-icon type="swap" />变更搭配师</a-menu-item>
                <a-menu-item key="2" v-if="special" @click="handleRemove('special')"><a-icon type="minus" />移出特殊名单</a-menu-item>
                <a-menu-item key="3" v-if="black" @click="handleRemove('black')"><a-icon type="minus" />移出黑名单</a-menu-item>
                <a-menu-item key="4" v-if="!black && !special" @click="showModal('joinS', true)"><a-icon type="plus" />加入特殊名单</a-menu-item>
                <a-menu-item key="5" v-if="!black" @click="showModal('joinB', true)"><a-icon type="plus" />加入黑名单</a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
            </a-dropdown>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <a-modal title="温馨提示" :dialog-style="{ top: '20px' }" :visible="removeVisible" @ok="() => removeOk()" @cancel="() => (removeVisible = false)">
      <p>{{ remveText }}</p>
    </a-modal>
  </div>
</template>
<script>
import { batchJoinCategory } from '@/api/box/member.js'
export default {
  props: {
    filter: {
      type: Object,
      default: {}
    },
    selectedRowKeys: {
      type: Array,
      default: null
    },
    black: {
      type: Boolean,
      default: false
    },
    special: {
      type: Boolean,
      default: false
    },
    selectedRows: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 查询参数
      queryParam: {
        subStatus: '',
        gender: '',
        fashionerId: '',
        vipType: '',
        fashionerType: this.filter.fashionerType ? this.filter.fashionerType.filter(e => e.default)[0].code : null,
        reasonId: ''
      },
      removeVisible: false,
      remveText: '',
      removeType: ''
    }
  },
  computed: {},
  watch: {
    'filter.fashionerType': function(newVal, oldVal) {
      this.queryParam.fashionerType = newVal.filter(e => e.default)[0].code || ''
    }
  },
  created() {},
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    removeOk() {
      // if (this.removeType) return
      let data = {
        requestData: {
          customerIds: this.selectedRows,
          categoryId: 56
        }
      }
      batchJoinCategory(data).then(res => {
        if (res.code === 0) {
          this.$emit('refreshList')
        } else {
          this.$message.error(res.data.msg)
        }
      })
      this.$store.commit('ADD_CUSTOMER_STATUS_LIST', 'Normal')
      this.removeVisible = false
    },
    handleRemove(v) {
      this.removeType = v
      let text = v === 'black' ? '黑名单' : '特殊名单'
      this.remveText = `确定将这${this.selectedRowKeys.length}项移出${text}?`
      this.removeVisible = true
    },
    onChange(value, dateString) {
      console.log('Selected Time: ', value)
      console.log('Formatted Selected Time: ', dateString)
    },
    onOk(value) {
      console.log('onOk: ', value)
      // this.beginDate = value[0].format('YYYY-MM-DD HH:mm:ss')
      // this.endDate = value[1].format('YYYY-MM-DD HH:mm:ss')
      // console.log('startTime', this.beginDate)
      // console.log('endTime', this.endDate)
    },
    // 最高价
    gPriceChange(value) {
      console.log('changed', value)
    },
    // 最低价
    lPriceChange(value) {
      console.log('changed', value)
    },
    showModal(type, value) {
      if (value) {
        this.$emit('showModal', true, type)
      } else {
        this.$emit('showModal', false, type)
      }
    },
    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    reset() {
      this.queryParam = {
        subStatus: '',
        gender: '',
        fashionerId: '',
        vipType: '',
        fashionerType: this.filter.fashionerType ? this.filter.fashionerType.filter(e => e.default)[0].code : null,
        reasonId: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] !== '' && values[i] !== undefined) {
          if (i === 'regTime') {
            formValue.regStartTime = values[i][0]
            formValue.regEndTime = values[i][1]
          } else if (i === 'subStartTime') {
            formValue.subStartStartTime = values[i][0]
            formValue.subStartEndTime = values[i][1]
          } else if (i === 'subEndTime') {
            formValue.subEndStartTime = values[i][0]
            formValue.subEndEndTime = values[i][1]
          } else if (i === 'joinTime') {
            formValue.joinStartTime = values[i][0]
            formValue.joinEndTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
